require("../../assets/css/basic.css");
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine_modify.less");
//引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	//1.顶部回到上一页功能
	dom.get(".goback").addEventListener("click", function () {
		history.back();
	});
	//2.性别选择框
	dom.get("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{
					label: "男",
					value: 0,
				},
				{
					label: "女",
					value: 1,
				},
				{
					label: "保密",
					value: 2,
				},
			],
			{
				onConfirm: function (result) {
					console.log(result[0].label);
					dom.get("#gender").textContent = result[0].label;
					dom.get("#gender").dataset.value = result[0].value;
				},
				title: "请选择性别",
			}
		);
	});
	//3.日期选择框
	dom.get("#birthday").addEventListener("click", function () {
		weui.datePicker({
			start: 1900,
			end: new Date().getFullYear(),
			onConfirm: function (result) {
				let bdayarr = result.map(function (v) {
					return v.value;
				});
				dom.get("#birthday").textContent = bdayarr.join("-");
			},
			title: "请选择您的生日",
		});
	});
	//4.头像上传
	dom.get("#profileupload").addEventListener("change", function () {
		let formData = new FormData();
		//FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
		formData.append("file", this.files[0]);

		//将构造好的函数,通过接口把文件发送到服务器
		axios.post("/api/shared/uploadPortrait", formData).then(function (res) {
			console.log(res);
			if (res.data.errno === 0) {
				//上传成功
				dom.get("#profile").src = axios.defaults.baseURL + res.data.data.url;
				//提交地址
				dom.get("#profile").dataset.value = res.data.data.url;
			} else {
				alert("上传失败");
			}
		});
	});
	//5.获取省份数据
	let provinceId = 0;
	dom.get("#province").addEventListener("click", async function () {
		//获取数据
		let province = await axios.get("api/shared/province");
		let provinceArr = province.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});
		weui.picker(provinceArr, {
			onConfirm: function (result) {
				dom.get("#province").textContent = result[0].label;
				dom.get("#province").dataset.value = result[0].value;
				provinceId = result[0].value;
			},
			title: "请选择省份",
		});
	});
	//6. 获取城市
	dom.get("#city").addEventListener("click", async function () {
		//有没有选择省份
		if (provinceId === 0) {
			alert("请选择省份");
			return;
		}

		//发请求获取城市数据
		let city = await axios.get("/api/shared/city?provinceId=" + provinceId);
		let cityArr = city.data.data.map((v) => {
			return { label: v.name, value: v.id };
		});

		weui.picker(cityArr, {
			onConfirm: function (result) {
				dom.get("#city").textContent = result[0].label;
				dom.get("#city").dataset.value = result[0].value;
			},
			title: "请选择城市",
		});
	});

	//7. 个人签名
	dom.get("#signature").addEventListener("input", function () {
		dom.get("#textnum").textContent = this.value.length;
	});

	//8. 上传个人资料数据
	dom.get("#savebtn").addEventListener("click", function () {
		//获取数据
		let nickName = dom.get("#nickname").value;
		let gender = Number(dom.get("#gender").dataset.value);
		let provinceId = Number(dom.get("#province").dataset.value);
		let cityId = Number(dom.get("#city").dataset.value);
		let birthday = dom.get("#birthday").textContent;
		let imgUrl = dom.get("#profile").dataset.value;
		let sign = dom.get("#signature").value;

		//发请求
		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					//存储token
					localStorage.setItem("token", res.data.data.token);
					history.back();
					alert("修改成功");
				} else {
					alert("修改失败");
				}
			});
	});

	//9. 个人资料数据回填
	axios.get("/api/user/info").then(async (res) => {
		let data = res.data.data;

		//回填头像
		dom.get("#profile").src = axios.defaults.baseURL + data.imgUrl;
		dom.get("#profile").dataset.value = data.imgUrl;
		//昵称
		dom.get("#nickname").value = data.nickName;
		//性别
		let genderArr = ["男", "女", "保密"];
		dom.get("#gender").textContent = genderArr[data.gender];
		dom.get("#gender").dataset.value = data.gender || 0;
		//生日
		dom.get("#birthday").textContent = data.birthday;
		//省份
		let pro = await axios.get("api/shared/province");
		let [province] = pro.data.data.filter((v) => v.id === data.provinceId);
		dom.get("#province").textContent = province.name;
		dom.get("#province").dataset.value = data.provinceId;
		//城市
		let city = await axios.get(
			"/api/shared/city?provinceId=" + data.provinceId
		);
		let [curCity] = city.data.data.filter((v) => v.id === data.cityId);
		dom.get("#city").textContent = curCity.name;
		dom.get("#city").dataset.value = data.cityId;
		//个人签名
		dom.get("#signature").value = data.sign;
		dom.get("#textnum").textContent = data.sign.length;
	});
});
